<!-- <template>
    <el-dialog :model-value="props.visible" 
        :title="props.title" 
        :before-close="onClose"
        :close-on-click-modal="false">
        <div class="container">
            <slot name="content"></slot>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="onClose" type="default">关闭</el-button>
                <el-button @click="onConfirm" type="primary">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template> -->

<template>
    <div>
        <el-dialog :model-value="props.visible" :title="props.title" :before-close="onClose"
            :style="{ height: props.height + '%' }"
            :width="props.width + '%'"
            :close-on-click-modal="false">
            <!-- 内容显示区 -->
            <div class="container">
                <slot name="content"></slot>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button v-if="props.showCloseBtn" @click="onClose" type="default">关闭</el-button>
                    <el-button v-if="props.showOkBtn" @click="onConfirm" type="primary">{{ props.okBtnName }}</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
// 定义弹窗数据类型
interface dialogProps {
    title: string,
    visible: boolean,
    width: number,
    height: number,
    showCloseBtn: boolean,
    showOkBtn: boolean,
    okBtnName: string,
}

// 接收父组件传递的参数
const props = withDefaults(defineProps<dialogProps>(), {
    title: "新增",
    visible: false,
    width: 630,
    height: 280,
    showCloseBtn: true,
    showOkBtn: true,
    okBtnName: '确认',
})

// 注册事件
const emit = defineEmits(["onClose", "onConfirm"])

// 关闭事件
const onClose = () => {
    emit("onClose");
}
// 提交事件
const onConfirm = () => {
    emit("onConfirm");
}
</script>


<style lang="scss" scoped>
.container {
    height: 100%;
    background-color: #FFF;
    overflow-x: inherit;
    overflow-y: auto;
}

:deep(.el-dialog) {
    padding: 0;
    max-width: 90% !important;
    /* 最大宽度 */
    max-height: 80% !important;
    /* 最大高度 */
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;

    .el-dialog__header {
        margin-right: 0px;
        padding-top: 10px;
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        background-color: #6366F1 !important;

        .el-dialog__title {
            padding: 16px;
            color: #FFF;
            font-size: 16px;
            font-weight: 600;
        }
    }

    .el-dialog__headerbtn {
        .el-dialog__close {
            color: #FFF;
        }
    }

    .el-dialog__body {
        height: 99%;
        // padding: 10px;
    }

    .el-dialog__footer {
        border-top: 1px solid #e8eaec !important;
        background-color: #FFF;
        padding: 10px;
    }
}

/* 隐藏整个滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* 或者只隐藏滚动条的轨道、滑块和角落 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
    display: none;
}

::-webkit-scrollbar-thumb {
    display: none;
}

::-webkit-scrollbar-corner {
    display: none;
}
</style>
